{% extends 'teacher/base.html' %}
{% load staticfiles %}
{% block content %}

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Settings
                    <small>Teacher's Course Settings Portal</small>
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-suitcase"></i>  <a href="/teaching">Teaching</a>
                    </li>
                    <li>
                        <i class="fa fa-compass"></i> {{ course.title }}
                    </li>
                    <li class="active">
                        <i class="fa fa-cogs"></i> Settings
                    </li>
                </ol>

            </div>
        </div>
        <!-- /.row -->
        
       <!-- Operation -->
       <div class="row">
           <div class="col-lg-12">
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <h3 class="panel-title"><i class="fa fa-cogs"></i> Operation</h3>
                   </div>
                   <div class="panel-body">
                       <form>
                            <div class="row">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        Course Status
                                    </label>
                                    <div class="col-sm-9">
                                        <input class="form-control"
                                                  id="disabledInput"
                                                type="text"
                                    {% if course.status == COURSE_SUBMITTED_FOR_REVIEW_STATUS %}
                                         placeholder="Submitted and Waiting for Review"
                                    {% elif course.status == COURSE_IN_REVIEW_STATUS %}
                                         placeholder="In Review"
                                    {% elif course.status == COURSE_UNAVAILABLE_STATUS %}
                                         placeholder="Course Unavailable"
                                    {% elif course.status == COURSE_AVAILABLE_STATUS %}                                         placeholder="Course Available"
                                    {% elif course.status == COURSE_REJECTED_STATUS %}
                                         placeholder="Course is Rejected and not Available"
                                    {% else %}
                                         placeholder="Unknown Error"
                                    {% endif %}
                                            disabled="">
                                    </div>
                                </div>
                            </div>
                            <br/>
                            <div class="row">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        Course Operation
                                    </label>
                                    <div class="col-sm-9">
                                    {% if review != None %}
                                    {% if review.status != COURSE_REJECTED_STATUS %}
                                        <button onclick="ajax_close_or_open_course();"
                                                     id="suspend_course_btn"
                                                   name="suspend_course_btn"
                                                   type="button"
                                                  class="btn btn-{% if course.status == COURSE_AVAILABLE_STATUS %}warning{% else %}success{% endif %}">
                                            <i class="fa fa-check-circle"></i> {% if course.status == COURSE_AVAILABLE_STATUS %}Close Course{% else %}Open Course{% endif %}
                                        </button>
                                    {% endif %}
                                    {% endif %}
                                    </div>
                                </div>
                            </div>
                            <br/>
                       </form>
                   </div>
               </div>
           </div>
       </div>
       <!-- /.row -->
       
       
       <!-- Passing Requirements for Exam -->
       <div class="row">
           <div class="col-lg-12">
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <h3 class="panel-title"><i class="fa fa-star"></i> Minimum Passing Grades for Exam</h3>
                   </div>
                   <div class="panel-body">
                       <form>
                           <div class="row">
                               <div class="form-group">
                                   <label class="col-sm-3 control-label">
                                       Final Exam Mark
                                   </label>
                                   <div class="col-sm-9">
                                       <input class="form-control"
                                                 id="disabledInput"
                                               type="text"
                                        placeholder="50%"
                                           disabled=true>
                                    </div>
                               </div>
                           </div><!-- /.row -->
                           <br/>
                           <div class="row">
                               <div class="form-group">
                                   <label class="col-sm-3 control-label">
                                       
                                   </label>
                                   <div class="col-sm-9">
                                       <button onclick=""
                                                    id="change_exam_mark_btn"
                                                  name="change_exam_mark_btn"
                                                  type="button"
                                                 class="btn btn-sm btn-success"
                                              disabled=true>
                                           <i class="fa fa-arrows-v"></i> Change
                                       </button>
                                   </div>
                               </div>
                           </div><!-- /.row -->
                           <br/>
                        </form>
                   </div>
               </div>
           </div>
       </div><!-- /.row -->

    <!-- Passing Requirements for Exam -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-certificate"></i> Minimum Passing Total Grades for Course</h3>
                </div>
                <div class="panel-body">
                    <form>
                        <div class="row">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">
                                    Final Course Mark
                                </label>
                                <div class="col-sm-9">
                                    <input class="form-control"
                                              id="disabledInput"
                                            type="text"
                                     placeholder="50%"
                                        disabled=true>
                                </div>
                            </div>
                        </div><!-- /.row -->
                        <br/>
                        <div class="row">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">
                                
                                </label>
                                <div class="col-sm-9">
                                    <button onclick=""
                                                 id="change_course_mark_btn"
                                               name="change_course_mark_btn"
                                               type="button"
                                              class="btn btn-sm btn-success"
                                           disabled=true>
                                        <i class="fa fa-arrows-v"></i> Change
                                    </button>
                                
                                </div>
                            </div>
                        </div><!-- /.row -->
                        <br/>
                    </form>
                </div>
            </div>
        </div>
    
<!-- Modal -->
<div id="ajax_modal"
   name="ajax_modal"></div>
<!-- end modal -->

<script>
    function ajax_close_or_open_course()
    {
        $('#suspend_course_btn').prop("disabled", true);
        $.ajax( 'suspend_course', {
               data: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
               },
               type: 'post',
               success: function(result) {
                    // success code execution here
                    if (result.status == 'success')
                    {
                        refresh_page();
                    }
               },
               error: function(xhr,status,error) {
                    // error code here
               },
               complete: function(xhr,status) {
                    // completion code here
                    $('#suspend_course_btn').prop("disabled", false);
               }
        });
    }

    /**
     *  Function makes the current tab refresh the page.
     */
    function refresh_page()
    {
        window.location = '{{ tab }}';
    }
    </script>


{% endblock content %}
